<template>
	<!-- 利率预算 -->

	<section class="content-box">
		<div>

		<div class="klione">

			<div class="kltop">

				<h3>利润预算表</h3>

				<div>

					<el-button type="primary">

						<i class="fa fa-file-excel-o"></i> 导出

					</el-button>

				</div>

			</div>

			<div class="kli">

				<div>

					<span class="demonstration">显示级别:</span>

					<el-select v-model="Levels" @change="chaBox()" filterable placeholder="请选择">

						<el-option v-for="item in AccrueLevels" :key="item.index" :label="item.Name+'级'" :value="item.Code">

						</el-option>

					</el-select>

				</div>

				<div>

					<span class="demonstration">预算树:</span>

					<el-select v-model="Bud" @change="depares()" filterable placeholder="请选择">

						<el-option v-for="item in BudeList" :key="item.index" :label="item.Name" :value="item.Code">

						</el-option>

					</el-select>

				</div>

				<div>

					<span class="demonstration">部门:</span>

					<el-select v-model="Depar" @change="sCode()" filterable placeholder="请选择">

						<el-option v-for="item in epartment" :key="item.index" :label="item.Name" :value="item.Code">

						</el-option>

					</el-select>

				</div>

				<el-button type="primary" @click="refer()">确定</el-button>

			</div>

		</div>

		<el-table :data="tableList" border max-height="700" style="width: 100%" class="kover">

			<el-table-column prop="BudgetCategoryName" label="预算类型" width="95" fixed>

			</el-table-column>

			<el-table-column prop="BudgetItemName" label="预算科目" width="300" show-overflow-tooltip fixed>

			</el-table-column>

			<el-table-column prop="Month1" label="1月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month2" label="2月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month3" label="3月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month4" label="4月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month5" label="5月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month6" label="6月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month7" label="7月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month8" label="8月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month9" label="9月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month10" label="10月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month11" label="11月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="Month12" label="12月" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

			<el-table-column prop="PlanSum" label="累计" width="120" :formatter="dealF" align="right" header-align="center">

			</el-table-column>

		</el-table>
		</div>
	</section>
</template>
<script>
	import axios from '../../util/axios';

	export default {

		name: 'lilv',

		data() {

			return {
				BudeList: [],
				Bud: '',
				epartment: [],
				Depar: '',
				Levels: '', //默认
				AccrueLevel: [], //级别集合
				tableList: [], //列表数据集合
				tableLevel: [],
				resBox: '',
				fnName: '',
				showBox: 1, //默认点击事件为为级别1 
				fuCode: '',
				fYCode: '',
				DeparCode: 0,
				showCode: 0,
			}
		},

		methods: {

			YearBudget() { //预算树选项列表
				let yusuanshu = {
					Code: "0",
					Name: "全部"
				}
				axios.post('BudgetList', {
					year: 2017
				}).then(res => {
					console.log(res, "预算树列表11111")
					res.unshift(yusuanshu)
					this.BudeList = res
					console.log(this.BudeList, "预算树列表22222")
					this.Bud = this.BudeList[0].Code
				}).catch(err => {
					console.log(err)
				})
			},

			refer: function() { //点击事件
				this.showBox = this.resBox
				this.showCode = this.fnCode
				this.DeparCode = this.fYCode
				console.log(this.showCode, "预算树")
				console.log(this.DeparCode, "部门")
				console.log(this.showBox, "级别")
				this.PageList();

			},

			PageList() { //列表数据

				axios.post('PageListJson', {
					yearBudget: this.showCode, //传接口响应参数 
					department: this.DeparCode,
					level: this.showBox
				}).then(data => {
					console.log(data)
					this.tableList = data;
					this.tableLevel = data[0].Level;

				}).catch(err => {

					console.log(err)

				})

			},

			AccrueLe() { //请求级别数据
				axios.post('AccrueLevels', {}).then(res => {
					console.log(res);
					this.AccrueLevels = res;
					this.Levels = res[0].Code
				}).catch(err => {
					console.log(err);
				})
			},

			Department() { //部门列表接口
				let bumen = {
					Code: "0",
					Name: "全部"
				}
				axios.post('DepartmentList', {

					yearbudget: this.fnName

				}).then(res => {
					console.log(res, "部门列表~~~~")
					res.unshift(bumen)
					this.epartment = res
					this.Depar = this.epartment[0].Code

				}).catch(err => {

					console.log(err)

				})

			},

			chaBox() {

				this.resBox = this.Levels

			},

			depares() { //预算树下拉事件

				this.fnName = this.Bud
				this.fnCode = this.Bud
				console.log(this.Bud, "预算树")
				this.Department();

			},

			sCode() {
				this.fYCode = this.Depar
				console.log(this.fYCode)
			},
			dealF(e,cell,cellValue) {
				console.log("1111111",cellValue)
				if(cellValue == 0){
					return ''
				}else{
					return cellValue
				}	   
			},

		},

		created() {

			this.YearBudget();

//			this.chaBox();

//			this.depares();

//			this.sCode();

//			this.Department();

			this.AccrueLe();
			
			this.PageList();

		}

	}
</script>
<style scoped>
	@import '../../common/css/index.css';
</style>